<template>
      <div class="footer">
      <ul>
        <!-- 点击跳转router-link  tag把跳转的标签改为li -->
        <router-link to="/home" tag="li">
          <span class="iconfont icon-shouye"></span>
          <p>首页</p>
        </router-link>
        <router-link to="/kind" tag="li">
          <span class="iconfont icon-fenlei"></span>
          <p>分类</p>
        </router-link>
        <router-link to="/cart" tag="li">
          <span class="iconfont icon-cart"></span>
          <p>购物车</p>
        </router-link>
        <!-- 未登录和我的需要切换，所以用v-if -->
        <router-link to="/my" tag="li" v-if="loginState">
          <span class="iconfont icon-wode"></span>
          <p>我的</p>
        </router-link>
        <router-link to="/login" tag="li" v-else>
          <span class="iconfont icon-wode"></span>
          <p>未登录</p>
        </router-link>
      </ul>
    </div>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
  // 登录和未登录是计算属性
  computed: {
    loginState(){
      // 判断有没有token,有token就是登录，没有就是未登录
      if(localStorage.getItem("token")){
        return true;
      }else{
        return false;
      }
    }
  }
}
</script>

<style>

</style>